<template>
  <div>
    <!-- 显示标题 -->
    <div v-if="title" class="font-bold mb-2">
      {{ title }}
    </div>
    <!-- 原有的图表逻辑 -->
    <div class="w-full relative">
      <!-- 根据 type 显示不同的内容 -->
      <div v-if="type === 1">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="userTotalInfo.UserNum || 0" />
        </div>
      </div>
      <div v-if="type === 2">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="userTotalInfo.IncreaseNum || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type === 3">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="dataTotalInfo.DataNum || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type === 4">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="dataTotalInfo.DataIncreaseNum || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <charts-content-number v-if="type === 5" :data="openDataTrend" height="14rem" />
      <charts-pie v-if="type === 6" :data="nodePieData" title="节点数与在线数" height="14rem" />
      <charts-pie v-if="type === 7" :data="appPieData" title="业务应用" height="14rem" />
      <charts-pie v-if="type === 8" :data="storagePieData" title="存储空间" height="14rem" />
      <div v-if="type === 9" class="flex items-center">
        <div class="w-1/6 text-center">
          <el-text class="font-bold"> 收益总额（元）</el-text>
          <div class="mt-4 text-gray-600 text-3xl font-mono">
            <el-statistic :value="incomeTotalInfo.TotalIncome || 0" />
          </div>
        </div>
        <div class="w-5/6">
          <charts-content-number2 :data="incomeTrend" height="14rem" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { TopRight } from '@element-plus/icons-vue'
import chartsContentNumber from "./charts-content-numbers.vue"
import chartsContentNumber2 from "./charts-content-number2.vue"
import chartsPie from "./charts-pie.vue"

const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: ""
  },
  userTotalInfo: {
    type: Object,
    default: () => ({})
  },
  dataTotalInfo: {
    type: Object,
    default: () => ({})
  },
  incomeTotalInfo: {
    type: Object,
    default: () => ({})
  },
  openDataTrend: {
    type: Array,
    default: () => []
  },
  incomeTrend: {
    type: Array,
    default: () => []
  },
  percentChange: {
    type: Number,
    default: 0
  },
  nodePieData: {
    type: Array,
    default: () => []
  },
  appPieData: {
    type: Array,
    default: () => []
  },
  storagePieData: {
    type: Array,
    default: () => []
  }
})
</script>

<style scoped lang="scss">
/* 自定义样式 */
</style>
